<template>
    <el-row class="main">
        <el-col :span="24" class="content box">
            <el-col class="left">
                <el-image
                    src="https://yhykt.oss-cn-beijing.aliyuncs.com/49AF77F4A144449F96B37B32E681EA87e66d4c5fc3fb668edebe13fe6edb821.png?Expires=4785540919&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oEnOxSfmOx3ZSoZFKMRkiddM7To%3D">
                </el-image>
                <div class="cont tl">
                    <h3 class="mb20">欢迎登录</h3>
                    <h3>五育通·劳动教育云</h3>
                    <span style="margin-top: 50px;display: block;">五育通·劳动教育云学习与实践管理平台</span>
                </div>
            </el-col>
            <el-col class="right">
                <el-col class="loginform box box-tb box-pack-center box-align-center">
                    <el-col class="title box box-align-center box-pack-end">
                        <el-image src="/static/image/wy_logo.png"
                            style="width: 40px;height: 40px; margin-right: 10px;border-radius: 50%;"></el-image>
                        五育通·劳动教育云
                    </el-col>
                    <el-col>
                        <div class="tab mb20">
                            账号登录
                        </div>
                    </el-col>
                    <el-form ref="form" :model="form" label-width="80px" class="reset" :rules="rules"
                        :label-position="labelPosition">
                        <el-form-item label="用户名" prop="usercode">
                            <el-input v-model="form.usercode" @keyup.enter.native="Login('form')"
                                style="border: #dbecea solid 1px;"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pwd">
                            <el-input type="password" v-model="form.pwd" @keyup.enter.native="Login('form')"
                                style="border: #dbecea solid 1px;"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="authCode" style="cursor: pointer;">
                            <div class="box box-align-center box-pack-start">
                                <el-input v-model="form.authCode" maxlength="4" @keyup.enter.native="Login('form')"
                                    style="border: #dbecea solid 1px;min-width:100px;margin-right: 20px;">
                                </el-input> <img :src="form.codeUrl" class="code" alt="" @click="getCode()">
                            </div>

                        </el-form-item>
                    </el-form>
                    <el-button class="reset-btn" :loading="loading" @click="Login('form')">登 录</el-button>
                    <el-image class="image" src="../../static/image_index/school.jpg">
                    </el-image>
                </el-col>

            </el-col>
        </el-col>
        <el-col style="color: #fff;" class="footer box box-align-center box-pack-center">
            <!-- <el-link class="text-link" :underline="false" href="http://beian.miit.gov.cn" target="_blank"
                style="color: #fff;">北京永恒信业教育科技有限公司 .版权所有 京公网安备 11010802041019号</el-link> -->
            <a class="text-link" target="_blank"
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802041019"
                style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                <img src="/static/image/b.png" style="float:left;" alt="">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"> 京公网安备
                    11010802041019号</p>
            </a>
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
                    京ICP备20011758号-10</p>
            </a>
        </el-col>

        <!-- https://beian.miit.gov.cn/#/Integrated/index -->


    </el-row>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'left',
            loading: false,
            form: {
                usercode: '',
                pwd: '',
                authCode: '',
                codeUrl: ''
            },
            rules: {
                usercode: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                }],
                pwd: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }
                    // , {
                    //     validator: (rule, value, callback) => {
                    //         const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
                    //         if (!reg.test(value)) {
                    //             callback(new Error('密码必须包含大小写字母和数字，且长度为8-16个字符'));
                    //         } else {
                    //             callback();
                    //         }
                    //     },
                    //     trigger: 'blur'
                    // }
                ],
                authCode: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                }]
            }
        };
    },
    mounted() {
        this.getCode()
        // this.logingLog()
    },
    methods: {
        Login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        ...this.form
                    }
                    this.$api.login.login(params).then(res => {
                        if (res.result == "success") {
                            this.$router.push({
                                path: '/role',
                                query: {
                                    usercode: this.form.usercode
                                }
                            });
                        } else if (res.result == "none") {
                            this.$message.error('无此用户');
                        } else if (res.result == "password_error") {
                            // this.loginAttempts++;
                            // if (this.loginAttempts >= 4) {
                            //     this.$message.error('您已输入密码错误3次，请30分钟后再试');
                            // } else {
                            //     this.$message.error('密码错误');
                            // }
                            this.$message.error('密码错误');
                        } else if (res.result == "fwdq") {
                            this.$message.error('服务已到期');
                        } else if (res.result == "auth_error") {
                            this.$message.error(res.msg);
                        } else if (res.result == "expired") {
                            this.$message.error(res.msg);
                        } else {
                            this.$message.error('无登录权限');
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        getCode() {
            this.$api.wyv3.getCode().then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.form.codeUrl = res.data.image
                    this.form.authToken = res.data.authToken
                }
            })
        },

    }
}
</script>

<style scoped lang="scss">
.code {
    width: 120px;
    height: 60px;
}

.footer {
    position: absolute;
    bottom: 20px;
    color: #fff;
}

.cont {
    // margin: 21% 0 0 12%;
    position: absolute;
    top: 28%;
    left: 12%;
}

h3 {
    font-size: 25px;
}

.main {
    min-width: 1200px;
    width: 100%;
    height: 100%;
    position: relative;
    // background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/0A46AC7C9EB04E29A06FFC7B418DD03Clogin_bg.png?Expires=4785474142&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oNUEoksoS%2FhHMawYRvyE47%2BEFcc%3D) no-repeat;
    background: url(https://www.wytldy.com/file/20230624/1687540193308bg.jpg) no-repeat;
    background-size: 100% 100%;

    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // width: 1200px;
        // height: 550px;
        width: 80%;
        // height: 75%;
        background-color: #f3f4fb;

        .left {
            position: relative;
            height: 100%;
            // background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/49AF77F4A144449F96B37B32E681EA87e66d4c5fc3fb668edebe13fe6edb821.png?Expires=4785540919&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oEnOxSfmOx3ZSoZFKMRkiddM7To%3D) no-repeat;
            // background-size: 100% 100%;
        }

        .right {
            // height: 100%;
        }
    }
}

.loginform {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px 25%;
    // width: 633px;
    background: #F8F9FC;
    border-radius: 5px;
}

.title {
    padding: 10px 20px;
    // width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: #181623;
    margin-bottom: 20px;
}

.tab {
    width: 80px;
    height: 19px;
    line-height: 19px;
    font-size: 20px;
    color: #181623;
    margin-bottom: 60px;

    &:after {
        content: '';
        width: auto;
        width: 46px;
        height: 3px;
        background: #FCCC00;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        z-index: 111111;
    }

}

.reset>>>.el-input__inner {
    border: none;
    background-color: #F8F9FC;
}

.reset>>>.el-form-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #D6DBE8;
}

.reset-btn {
    width: 100%;
    height: 42px;
    background: #626BF1;
    border-radius: 21px;
    font-size: 18px;
    color: #fff;

    &.el-button:focus {
        color: #fff;
        background-color: rgba(98, 107, 241, .7);
    }

    &.el-button:hover {
        color: #fff;
        background-color: rgba(98, 107, 241, .7);
    }

    &.el-button:active {
        color: #fff;
        background-color: rgba(98, 107, 241, .7);
    }
}

.image {
    width: 260px;
    margin-top: 130px;
}

.reset {
    width: 100%;
}
</style>
